<div class="box box-info">
    <div class="box-header with-border">
        <h3 class="box-title">广告位列表</h3>

        <div class="box-tools pull-right">
            <a href="javascript:;" class="btn btn-sm btn-info btn-flat pull-left" onclick="showEditModel()"><i class="fa fa-fw fa-user-plus"></i> 新增广告位</a>
        </div>
    </div>
    <!-- /.box-header -->
    <div class="box-body">
        <div class="table-responsive">
            <table class="table no-margin">
                <thead>
                    <tr>
                        <th>广告位ID</th>
                        <th>广告位名称</th>
                        <th>广告位类型</th>
                        <th>版本尺寸</th>
                        <th>广告数</th>
                        <th>广告描述</th>
                        <th>状态</th>
                        <th>管理操作</th>
                    </tr>
                </thead>
                <tbody>
                    {volist name="list" id="data"}
                    <tr>
                        <td>{$data.id}</td>
                        <td>{$data.name}</td>
                        <td>{$posterType[$data['type']]}</td>
                        <td>{$data.width}*{$data.height}</td>
                        <td>{$data.items}</td>
                        <td>{$data.description}</td>
                        <td>{$posterStatus[$data['status']]}</td>
                        <td>
                            <a href="#" class="btn btn-link" onclick='editSpace({:json_encode($data)})'>编辑</a>
                            |
                            <a href="#" class="btn btn-link" onclick='delSpace({$data.id},"{$data.name}")'>删除</a>
                            |
                            <a href="{:url('poster/posterlist',['id'=>$data->id])}" class="btn btn-link">广告列表</a>
                            |
                            <a href="{:url('poster/editposter',['spaceid'=>$data->id])}" class="btn btn-link" >添加广告</a>
                            <!--a href="{:url('power/editMemberPriv',['id' => $data->id])}" class="btn btn-info">权限设置</a-->
                        </td>
                    </tr>
                    {/volist}
                </tbody>
            </table>
        </div>
        <!-- /.table-responsive -->
    </div>
    <!-- /.box-body -->
</div>


<div class="modal fade" id="spaceModel">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title"><span>编辑</span>广告位</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="posterForm">
                    <input type="hidden"  id="spaceId" name="id" value="" />
                    <div class="form-group">
                        <label for="spaceTitle" class="col-sm-3 control-label">广告位名称：</label>

                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="spaceTitle" name="name" placeholder="广告位名称">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="spaceType" class="col-sm-3 control-label">广告位类型：</label>

                        <div class="col-sm-3">
                            <select class="form-control" name="type">
                                {foreach $posterType as $key=>$value}
                                <option value="{$key}">{$value}</option>
                                {/foreach}
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="spaceWidth" class="col-sm-3 control-label">广告位宽度：</label>

                        <div class="col-sm-6">
                            <input type="number" class="form-control" id="spaceWidth" placeholder="宽度" name="width">
                        </div>
                        <div class="col-sm-3">
                            <label class="control-label">px</label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="spaceHeight" class="col-sm-3 control-label">广告位高度：</label>

                        <div class="col-sm-6">
                            <input type="number" class="form-control" id="spaceHeight" placeholder="高度" name="height">
                        </div>
                        <div class="col-sm-3">
                            <label class="control-label">px</label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="description" class="col-sm-3 control-label">广告位描述：</label>

                        <div class="col-sm-9">
                            <textarea class="form-control" rows="3" id="description" placeholder="广告位描述 ..." name="description"></textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="spaceStatus" class="col-sm-3 control-label">广告位状态：</label>

                        <div class="col-sm-3">
                            <select class="form-control" id="spaceStatus" name="status">
                                <option value="">设置状态</option>
                                {foreach $posterStatus as $key=>$value}
                                <option value="{$key}">{$value}</option>
                                {/foreach}
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="savePosterSpace()">保存</button>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">

    /**
     * 显示编辑框
     * @returns {undefined}
     */
    function showEditModel() {
        fromReset('posterForm');
        $('#spaceStatus').val(1);
        $("#spaceModel").modal('show');
    }

    /**
     * 编辑广告位
     */
    function editSpace(info) {
        showEditModel();
        $('#spaceId').val(info.id);
        $('#spaceTitle').val(info.name);
        $('#spaceType').val(info.type);
        $('#spaceWidth').val(info.width);
        $('#spaceHeight').val(info.height);
        $('#description').val(info.description);
        $('#spaceStatus').val(info.status);
    }
    
    /**
     * 删除广告位
     */
    function delSpace(id,name){
        var _url = '{:url("poster/delSpace")}';
        url = _url + '?id=' + id;
        confirmDelDefault(url,"广告位名称："+ name + "<br/>该操作会一并删除此广告位下的所有广告，请谨慎操作！");
    }

    /**
     * 保存内容
     * @returns {Boolean}
     */
    function savePosterSpace() {
        var formData = $('#posterForm').serializeArray();
        var data = {};
        $.each(formData, function () {
            data[this.name] = this.value;
        });
        console.log(data);
        if (!data.name) {
            toast('提示', '广告位名称不能为空', 1000);
            return false;
        }
        stbAjax('{:url("poster/editspace")}', data, function (result) {
            //console.log(result);
            //$("#spaceModel").modal('hide');
            toast('提示', result.msg, 1000);
            setTimeout('location.reload()', 500);
        });
    }
</script>